<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
     canvas三要素
     id:唯一标识
     width:画布内容宽度的像素大小
     height:画布内容高度的像素大小
   -->
    <canvas id="canvas1" width="600" height="600">
      这里的内容画布是不显示的
    </canvas>
  </body>
  <script>
    //1.找到画布对象
    var canvas1 = document.querySelector("#canvas1");
    //2.找到上下文对象(画笔对象)这边是2d引擎的
    var ctx = canvas1.getContext("2d");
    //3.绘制图像
    //ctx.drawImage({图片对象,图像裁剪的位置x,图像裁剪的位置y,裁剪宽度,裁剪高度,x位置,y位置,宽度,高度})
    var img = new Image();
    img.src =
      "https://img1.baidu.com/it/u=2201501474,2671231298&fm=26&fmt=auto";

    var img2 = new Image();
    img2.src =
      "https://img2.baidu.com/it/u=2970699097,2639510947&fm=253&fmt=auto&app=120&f=JPEG?w=400&h=266";
    //因为请求src是个异步过程,所以等图片载入后再进行绘制
    img.onload = function () {
      ctx.drawImage(img, 50, 50, 200, 200);
    };
    img2.onload = function () {
      ctx.drawImage(img2, 50, 50, 300, 300, 250, 250, 400, 400);
      ctx.fillText("你好啊", 400, 400);
    };
  </script>
</html>
